<template>
  <div>
    <el-drawer title="详细信息" v-model="Visible" size="90%" :before-close="closeDrawer">
      <div class="w-[98%] p-20px">
        <el-row>
          <span class="label">平台备注：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" size="large">{{ orderInfo.platformMemo }}</el-tag>
        </el-row>
        <el-row>
          <span class="label">联系方式：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.identityPhone }}</el-tag>
          <span class="label" style="margin-left: 10px">转接类型：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.transferType }}</el-tag>
          <span class="label" style="margin-left: 10px">接单日期：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.orderReceiveDate }}</el-tag>
          <span class="label" style="margin-left: 10px">结束日期：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.orderEndDate }}</el-tag>
          <span class="label" style="margin-left: 10px">中介编号：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.indexId }}</el-tag>
        </el-row>
        <el-row>
          <span class="label" style="margin-left: 10px">业务类型：</span>
          <el-tag style="font-size: 22px;"
                  effect="plain" type="danger" size="large">{{ orderInfo.businessType }}</el-tag>
        </el-row>

      </div>
        <div style="margin-bottom: 10px">
          <div class="info-container">
            <span class="info-item">姓名：{{ currentItem.customName }}</span>
            <span class="info-item">性别：{{ currentItem.sex }}</span>
          </div>


          <el-button type="success" style="width: 200px;float:left ;" @click="addItem">新增</el-button>
          <el-button :style="getCreditCardStyle()" @click="openCreditCardModal">信用卡资料</el-button>
          <el-button :style="getOnlineStyle()" @click="openOnlineLendingModal">网贷资料</el-button>

        <el-table :data="tableData" style="width: 100%" border stripe @rowDblclick="handleRowDblClick" show-overflow-tooltip>
          <el-table-column label="序号" width="60" align="center">
            <template #default="{ $index }">
              {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
            </template>
          </el-table-column>
          <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
            :width="column.width" :align="column.align" :sortable="column.sortable"></el-table-column>
          <el-table-column label="操作" width="320" align="center" fixed="right">
            <template v-slot="scope">
              <el-button @click="addMaintenance(scope.row)" size="mini">维护</el-button>
              <el-button @click="editPayDetailHandle(scope.row)" size="mini">编辑</el-button>
              <el-button :style="getInfoStyle(scope.row)" type="primary" @click="openInfoView(scope.row)" size="mini">资料</el-button>
              <el-button type="danger" @click="deleteItem(scope.row)" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <employeeManagement ref="modelRef" :orderInfo="currentItem" :item="item" @close="close" style="width: 20%;" />
    <CreditCardModal ref="creditCardModalRef" />
    <OnlineLendingModal ref="onlineLendingModalRef" @ok="updateHandle"/>
    <Info ref="infoRef" @ok="updateHandle"/>
    <AddModel ref="addRef" @ok="updateHandle"/>
    <DtlList ref="dtlListRef" />
  </div>

</template>

<script setup>
import { ref, defineEmits, watch, onMounted } from 'vue';
import employeeManagement from './employeeManagement.vue'; // 引入子组件
import AddModel from "@/views/tool/employeeDetail/maintenance/AddModel.vue";
import DtlList from './maintenance/DtlList.vue';
import Info from './Info.vue';
import request from '@/config/axios'
const addRef = ref()

const props = defineProps({
  currentItem: {
    type: Object,
    required: true,
  },
});

const columns = ref([
  {prop: 'platformType', label: '平台类型', width: '150', align: 'center',},
  {prop: 'platform', label: '平台', width: '150', align: 'center'},
  {prop: 'platformCreateTime', label: '平台创建时间', width: '120', align: 'center'},
  {prop: 'overdueDateTime', label: '逾期时间', width: '120', align: 'center'},
  {prop: 'trusteeshipAmount', label: '金额', width: '150', align: 'center'},
  {prop: 'handleProgress', label: '最新处理进度', width: '120', align: 'center'},
  {prop: 'handleUser', label: '处理人', width: '120', align: 'center'},
  {prop: 'lastHandleTime', label: '最后处理时间', width: '120', align: 'center'},
  {prop: 'createDateTime', label: '最新下单时间', width: '160', align: 'center'},
  {prop: 'handleMemo', label: '备注', width: '300', align: 'center'},
  {prop: 'handleStatus', label: '处理状态', width: '120', align: 'center'},
]);

const ListVisible = ref(false);
const Visible = ref(true);
const item = ref({});
const tableData = ref([]);
const modelRef = ref()
const dtlListRef = ref()

const emit = defineEmits(['close', 'save']);

onMounted(() => {
  fetchData()
});

async function deleteItem(params) {
  ElMessageBox.alert('删除吗', '', {
    confirmButtonText: 'OK',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    try {
      request.delete({
        url: "/trusteeshipDetail/deleteById",
        params: { id: params.id }
      }).then(() => {
        fetchData()
      })


    } catch (error) {
      throw error;
    } finally {

    }
  })

}
const orderInfo = ref({});


const getAnswerRecord = async function(orderId) {
  const response = await request.get({
    url: '/order/getById',
    params: { "id": orderId}
  })
  orderInfo.value = response
}

async function fetchData() {
  const response = await request.get({
    url: '/trusteeshipDetail/listAllByOrderId',
    params: {
      orderId: props.currentItem.orderId
    }
  })
  // tableData.value = response
  const xinyognka = []
  const wangdai = []
  const xinyongdai = []
  response.forEach(item => {
    if (item.platformType === '信用卡') {
      xinyognka.push(item)
    } else if (item.platformType === '网贷') {
      wangdai.push(item)
    } else if (item.platformType === '信用贷') {
      xinyongdai.push(item)
    }
  })

  //获取订单信息
  getAnswerRecord(props.currentItem.orderId)
  tableData.value = [...xinyognka, ...wangdai, ...xinyongdai]
}


const addItem = (rowData) => {
  modelRef.value.add()

};

const addMaintenance = (rowData) => {
  addRef.value.open(rowData)
}

const removeItem = (index) => {
  item.value.arr.splice(index, 1);
};

function closeDrawer() {
  emit('close');
}

function close() {
  ListVisible.value = false
  fetchData()
}

const editPayDetailHandle = (row) => {
  modelRef.value.edit(row)
};

import CreditCardModal from "./info/CreditCardModal.vue"
import OnlineLendingModal from "./info/OnlineLendingModal.vue"

const creditCardModalRef = ref()
const onlineLendingModalRef = ref()

const openCreditCardModal = function() {
  creditCardModalRef.value.open(props.currentItem)
}

const openOnlineLendingModal = function() {
  onlineLendingModalRef.value.open(props.currentItem)
}

const updateHandle = function() {
  fetchData()
}

const getCreditCardStyle = function() {
  if (orderInfo.value.creditCardInfo){
    return {
      backgroundColor: '#67c23a', // 使用 !important
      color: 'white',
      width: '200px',
    }
  }else{
    return {
      backgroundColor: '#e4a43e', // 使用 !important
      color: 'white',
      width: '200px',
    }
  }
}

const getOnlineStyle = function() {
  if (orderInfo.value.onlineLendingInfo){
    return {
      backgroundColor: 'green', // 使用 !important
      color: 'white',
      width: '200px',
    }
  }else{
    console.log('无资料')
    return {
      backgroundColor: 'orange', // 使用 !important
      color: 'white',
      width: '200px',
    }
  }
}

const getInfoStyle = function (row) {
  if (row.infoStatus == '1') {
    return {
      backgroundColor: 'green', // 使用 !important
    }
  } else {
    return {
      backgroundColor: 'orange', // 使用 !important
    }
  }
}
/**
 * 打开当前平台的维护列表页面
 */
const handleRowDblClick = (row) => {
  dtlListRef.value.open(row)
}


const infoRef = ref()
const openInfoView = function(row) {
  console.log('---row---',row)
  infoRef.value.open(row)
}
</script>

<style scoped>
.drawer-footer {
  display: flex;
  justify-content: flex-end;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.select,
.input {
  margin-right: 10px;
  width: 200px;
  /* 调整宽度以适应布局 */
}

.delete-button {
  margin-left: 10px;
}

.add-button {
  margin-bottom: 10px;
}
.info-container {
  float:left ;
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 每个项之间的间距 */
  margin-bottom: 15px;
  border-radius: 5px; /* 圆角效果 */

  width: 203px;
  font-size: 22px; /* 字体大小 */
  font-weight: 800;

}

.info-item {
  font-size: 16px; /* 字体大小 */
  color: rgb(65, 50, 50);
  margin-right: 20px;
}
</style>
